<template>
	<view class="list-wrap">
		<view class="tab-wrap">
			<liuyuno-tabs :tabData="catList" :activeIndex="tabIndex" @tabClick='tab' class="nav"/>
			<view class="contx" v-if="countdown">
				<view class="roll">
					<mySwiper></mySwiper>
				</view>
				<view class="info-price-right">
					<view style="margin-right: 10rpx;">距失效</view>
					<my-countdown></my-countdown>
					<!-- <uni-countdown :show-day="false" :font-size="12" color="#FFFFFF" background-color="#FF162E" border-color="#FF162E" splitorColor="#FF162E" :day="1" :hour="time.hour" :minute="time.minute" :second="time.seconde"></uni-countdown> -->
				</view>
			</view>			
		</view>		
		<view class="product-box">
			<view class="commodity">
				<product v-for="item in 20" :key="item" style="width: 49.2%;"></product>
			</view>
			<uni-load-more :status="dataStatus" :iconSize="20"></uni-load-more>
		</view>
	</view>	
</template>

<script>
	import product from "@/components/product-item/product-item.vue"
	import mySwiper from "@/components/my-swiper/my-swiper-t.vue"
	export default {
		name:"list",
		components:{product,mySwiper},
		props:{
			countdown:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				catList: [{"cid":"39","name":"超值兑换"},{"cid":"29","name":"居家"},{"cid":"34","name":"男装"},{"cid":"36","name":"运动"},{"cid":"33","name":"数码"},{"cid":"37","name":"家纺"},{"cid":"32","name":"美妆"}],
				tabIndex:0,
				dataStatus:'loading'
			};
		},
		// computed:{
		// 	time(){
		// 		return this.$store.state.time
		// 	}
		// },
		methods:{
			tab(e){
				console.log(e)
				this.tabIndex = e
			},
			reachBottom(){
				this.dataStatus = "loading"
				console.log("触底，加载更多页面滚动至底部")
				setTimeout(()=>{
					this.dataStatus = "noMore"
				},2000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-wrap{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.tab-wrap{
		position: sticky;
		top: 0;
		z-index: 10;
		background: #fff;
		padding-bottom: 10rpx;
	}	
	.contx{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 20rpx 10rpx;
		swiper{
			width: 100%;
			height: 100%;
		}
		.roll{
			width: 60%;
			height: 50rpx;
			background: rgba(0, 0, 0, 0.3);
			border-radius: 50rpx;
			image{
				width:140px;
				height: 140px;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
		.info-price-right{
			display: flex;
			align-items: center;
		}
	}
	.product-box{
		width: 100%;
		position: relative;
		box-sizing: border-box;
		.commodity{
			width: 100%;
			margin: 0 auto;
			padding: 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	}
</style>